<script setup lang="ts">
import { WebviewWindow } from "@tauri-apps/api/webviewWindow";
import { AppDto } from "../../store/app.store";

const props = defineProps<{
  data: AppDto;
}>();

function openApp() {
  const newWindow = new WebviewWindow(props.data.name, {
    title: props.data.name,
    url: props.data.isSys
      ? `#/${props.data.code}`
      : `#/modApp/${props.data.id}`,
    width: 800,
    height: 600,
    center: true,
    resizable: false,
    decorations: true,
    visible: true,
  });
  console.log(newWindow);
  newWindow.once("tauri://created", () => {
    console.log("新窗口创建成功");
  });
  newWindow.once("tauri://error", (error) => {
    console.log("创建失败", error);
  });
}
</script>
<template>
  <div class="app-icon" @click="openApp">
    <div class="icon">{{ data.icon }}</div>
    <div class="name">{{ data.name }}</div>
  </div>
</template>

<style scoped lang="scss">
.app-icon {
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  justify-content: center;
  height: 76px;
  width: 76px;
  border-radius: 5px;
  overflow: hidden;
  &:hover {
    cursor: pointer;
    background-color: #96beef;
    transition: all 0.3s ease-out;
  }
  .icon {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 60px;
    width: 60px;
    border: 1px solid #333;
    border-radius: 5px;
  }
}
</style>
